<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            background-color: ;
            transform: translate();
        }
    </style>
</head>
<body>
    <!-- <div id="box" style="color: red;">hello world</div> -->
    <button>点我</button>

    <script>

        // 选择器 done
        // 修改属性 todo innerText
        // 添加事件 done

        // var a = document.getElementById('a');
        // var s = document.getElementsByTagName('span');
        // var b = document.getElementsByClassName('b');

        // var a = document.querySelector('#a');
        // a.innerText = 'hello world1';
        // console.dir(a);

        // var a = document.querySelector('#a');
        // var btn = document.querySelector('button');
        // var flag = true;

        // // addEventListener: 函数
        // // add: 添加
        // // event: 事件
        // // listener: 监听器
        // function fn () {
        //     // 点击时 换掉#a的内容
        //     // if (flag) {
        //     //     a.innerText = 'hello world111111';
        //     // } else {
        //     //     a.innerText = 'hello world';
        //     // }

        //     a.innerText = flag ? 'hello world111111' : 'hello world';

        //     // flag取反
        //     flag = !flag;
        // }
        // btn.addEventListener('click', fn);

        // var box = document.querySelector('#box');

        // // box.style.color
        // // box.id = 'box1'; v
        // // box.className = 'abc'; x
        // // box.xxx = 'zzz'; x

        // // set: 设置
        // // attribute: 属性
        // box.setAttribute('id', 'box1');
        // box.setAttribute('class', 'abc');
        // box.setAttribute('xxx', 'xyz');
        // box.setAttribute('style', 'color: red; transform: rotate(90deg)');

        // 写一个按钮
        // 点击一下变成红色 再点一下变成绿色

        var btn = document.querySelector('button');
        var flag = true;

        // 点击时 应该做的事情
        function onClick () {
            // if (flag) {
            //     btn.setAttribute('style', 'background-color: red;');
            // } else {
            //     btn.setAttribute('style', 'background-color: green;');
            // }
            btn.setAttribute('style', `background-color: ${ flag ? 'red' : 'green' };`);
            flag = !flag;
        }
        btn.addEventListener('click', onClick);

    </script>
</body>
</html>